<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="dialogTitle"
    append-to-body
    width="45%">
    <el-form
      :model="dept"
      label-position="left"
      label-width="120px"
      style="width: 450px; margin-left:50px;"
    >
      <el-form-item label="部门编号">
        <el-input
          :disabled="idDisabled"
          v-model="dept.id"
        />
      </el-form-item>
      <el-form-item label="部门名称">
        <el-input v-model="dept.name" />
      </el-form-item>
      <el-form-item label="部门默认权限">
        <el-input v-model="dept.permission" type="number" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cacleOrSuccessCallback(false)">取 消</el-button>
      <el-button type="primary" @click="handleOk">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { saveDept } from '@/api/dept'
export default {
  name: 'DeptDialog',

  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    cacleOrSuccessCallback: {
      type: Function,
      default: () => {}
    },
    dialogTitle: {
      type: String,
      required: true
    },
    getDept: {
      type: Function,
      default: () => ({})
    }
  },

  data() {
    return {
      dept: {},
      idDisabled: false
    }
  },

  watch: {
    dialogVisible(val) {
      if (val) {
        this.dept = { ...this.getDept() }
        if (this.dialogTitle === '修改部门') {
          this.idDisabled = true
        } else {
          this.idDisabled = false
        }
      }
    }
  },

  methods: {
    handleOk: async function(value) {
      const res = await saveDept(this.dept)
      if (res.data && res.data.code === 0) {
        this.cacleOrSuccessCallback(res.data.data)
      }
    }
  }
}
</script>

